<template>
	<view class="addpage">
		<view class="box">
			<view class="boxtitle">
				基本信息
			</view>
			<view class="labelline">
				<view class="label">
					与本人关系
				</view>
				<picker @change="bindPickerChange" :value="index" :range="array"  range-key="label">
					<view class="picker">{{array[index].label}}   <view class="iconfont icon-xiangxia2"></view> </view>
				</picker>
			</view>
			<view class="ageline">
				<view class="label">
					年龄
				</view>
				<input type="number" placeholder="请输入" />
			</view>
			<view class="sexline">
				<view class="label">
					性别
				</view>
				<view class="sexbox">
					<view class="itemsex">
						<view class="yuan" v-if="sex==2" @click="sex=1">
							
						</view>
						<view class="yuan1 " v-if="sex==1">
							<view class="dian">
								
							</view>
						</view>
						<view class="label">
						男
						</view>
					</view>
					<view class="itemsex">
						<view class="yuan" v-if="sex==1" @click="sex=2">
							
						</view>
						<view class="yuan1" v-if="sex==2">
							<view class="dian">
								
							</view>
						</view>
						<view class="label">
						女
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="boxtitle">
				症状简介
			</view>
			<textarea v-model="conten" cols="30" rows="10"></textarea>
			<view class="list">
				<view class="itemlist" @click="selectdes('心梗')">
					心梗
				</view>
				<view class="itemlist" @click="selectdes('糖尿病')">
					糖尿病
				</view>
				<view class="itemlist" @click="selectdes('冠心病')">
					冠心病
				</view>
				<view class="itemlist" @click="selectdes('高血压')">
					高血压
				</view>
				<view class="itemlist" @click="selectdes('脑梗')">
					脑梗
				</view>
				<view class="itemlist" @click="selectdes('皮肤病')">
					皮肤病
				</view>
			</view>
		</view>
		<view class="pagebtn">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sex:1,
				index:0,
				array:[
					{
						id:1,
						label:'父亲'
					},
					{
						id:2,
						label:'母亲'
					},
					{
						id:3,
						label:'叔叔'
					},
					{
						id:4,
						label:'阿姨'
					},
					{
						id:5,
						label:'岳父'
					},
					{
						id:6,
						label:'岳母'
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
   .addpage{
	   width: 750rpx;
	   box-sizing: border-box;
	   padding: 20rpx;
	   background-color: whitesmoke;
	   .box{
		   width: 100%;
		   background-color: white;
		   border-radius: 20rpx;
		   box-sizing: border-box;
		   padding: 20rpx;
		   .boxtitle{
			  border-left: 8rpx  solid #1a4f8a;
				font-weight: bold;
				padding-left: 30rpx;
		   }
		   .labelline{
			   width: 100%;
			   display: flex;
			   align-items: center;
			   height: 100rpx;
			   line-height: 100rpx;
			   justify-content: space-between;
			   font-size: 30rpx;
			   font-weight: bold;
			   border-bottom: 1rpx solid whitesmoke;
			   .picker{
				   width:200rpx;
				   display: flex;
				   align-items: center;
				   height: 100rpx;
				   line-height: 100rpx;
				   
			   }
		   }
		   .ageline{
			   width: 100%;
			   display: flex;
			   align-items: center;
			   height: 100rpx;
			   line-height: 100rpx;
			   justify-content: space-evenly;
			     border-bottom: 1rpx solid whitesmoke;
				 font-size: 30rpx;
				 font-weight: bold;
			   input{
				width: 70%;
				box-sizing: border-box;
				padding-left: 20rpx;
				height: 100rpx;
				line-height: 100rpx;   
			   }
		   }
		   .sexline{
			   width: 100%;
			   display: flex;
			   align-items: center;
			   height: 100rpx;
			   line-height: 100rpx;
			   justify-content: space-evenly;
			     border-bottom: 1rpx solid whitesmoke;
				 font-size: 30rpx;
				 font-weight: bold;
				 .sexbox{
					 width: 70%;
					 height: 100rpx;
					 line-height: 100rpx;   
					 display: flex;
					 align-items: center;
					 height: 100rpx;
					 line-height: 100rpx;
					 justify-content: space-evenly;
					 .itemsex{
						 display: flex;
						 align-items: center;
					 }
					 .yuan{
						 width: 30rpx;
						 height: 30rpx;
						 border-radius: 50%;
						 box-sizing: border-box;
						 border: 1rpx solid gray;
						 margin-right: 10rpx;
					 }
					 .yuan1{
					 						 width: 30rpx;
					 						 height: 30rpx;
					 						 border-radius: 50%;
					 						 box-sizing: border-box;
					 						 border: 1rpx solid #1a4f8a;
											  margin-right: 10rpx;
											   line-height: 30rpx;
											   
											 .dian{
												 width: 20rpx;
												 height: 20rpx;
												 border-radius: 50%;
												 background-color: #1a4f8a;
												 margin: 2rpx auto;
												 
											 }
					 }
				 }
		   }
		   
		   textarea{
			   margin: 10rpx;
			   background: white;
		   }
		   .list{
			   width: 100%;
			   display: flex;
			   align-items: flex-start;
			   flex-wrap: wrap;
			   .itemlist{
				   width: 100rpx;
				   min-width: 100rpx;
				   font-size: 26rpx;
				   height: 50rpx;
				   line-height: 50rpx;
				   text-align: center;
				   border-radius: 10rpx;
				   background-color: #ececec;
				   margin: 4rpx 14rpx;
			   }
		   }
		   
		   
	   }
	   .pagebtn{
	   	width: 80%;
	   	height: 80rpx;
	   	text-align: center;
	      margin: auto;
	      margin-top: 200rpx;
	      border-radius: 10rpx;
	   line-height: 80rpx;
	   background-color: #1a4f8a;
	   color: white;
	   font-weight: bold;
	   }
   }
</style>
